<template>
	<div class="container">
		<div class="scroll-container" ref='loadMore'>
			<div class="scroll-content">
				<slot></slot>				
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	export default {
		name: 'load-more',
		props: {
			data: {
				type: Array
			},
			isShow: {
				type: Boolean
			},
			probeType: {
				type: Number,
				default: 3
			},
			click: {
				type: Boolean,
				default: true,
			},
			startY: {
				type: Number,
				default: -1 // 如果设置成 -1 则默认滚动到最底部
			},
		},
		watch: {
			data() {
				this.refresh();
				this.scrollEnd();
			},
			isShow(to, from) {
				if(to) {
					this.refresh();
					if(this.startY == -1) {
						this.scrollEnd()
					}
				}
			}
		},
		mounted() {
			var _this = this;
			this.$nextTick(()=>{
				this._initScroll();
			})
		},
		methods: {
			scrollEnd() {
				var maxScrollY = this.scroll.maxScrollY;
				this.scroll.scrollTo(0,maxScrollY,0);
			},
			_initScroll() {
				this.defaultStartY = this.startY;
				this.scroll = new BScroll(this.$refs.loadMore, {
					probeType: this.probeType,
					click: this.click,
					startY: this.startY,
				})
			},
			refresh() {
				this.scroll && this.scroll.refresh()
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	.scroll-container  {
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
}
</style>